<template>
    <n-card :title="header_excel" closable @close="handleClose">
        <template #header-extra>
            <n-flex justify="space-between">
                <slot name="header-extra"></slot>
                <n-switch @update:value="changePage">
                    <template #unchecked>图表</template>
                    <template #checked>文本</template>
                </n-switch>
                <button @click="emit('saveData')">保存</button>
                <!-- <n-button size="small" type="primary" @click="changePage" ghost>切换</n-button> -->
            </n-flex>
        </template>
        <template #default>
            <n-flex vertical :size="[1, 0]">
                <!-- 表格 -->
                <n-flex :size="[1, 0]" v-if="currentPage === 'word'">
                    <n-card style="width: 20vw;"><n-input type="textarea" placeholder="文字" rows="15" /></n-card>
                </n-flex>
                <n-flex justify="left" v-if="currentPage === 'echarts'">
                    <n-dropdown trigger="hover" :options="chartMenu" @select="chartMenuSelect">
                        <n-button>图表类型</n-button>
                    </n-dropdown>
                </n-flex>
                <n-flex :size="[1, 0]" v-if="currentPage === 'echarts'">
                    <div id="echarts" style="width: 75vw; height: 400px"></div>
                </n-flex>
            </n-flex>
        </template>
        <template #footer>
            <slot name="footer"></slot>
        </template>
        <template #action>
            <slot name="action"></slot>
        </template>
    </n-card>
</template>
<script setup lang="ts">
import { h, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { NFlex, NCard, NDropdown, NButton, NInput, NSwitch } from 'naive-ui';
import SvgIcon from '../components/SvgIcon.vue';
import * as echarts from 'echarts'
const emit = defineEmits(['saveData'])
const router = useRouter()
/**
 * 使用组件传值的方式，将组件的标题头和图标传进来
 */
//接收props
const props = defineProps({
    title: {
        type: String,
        default: 'Echarts-Word' // 默认值
    },
    icon: {
        type: String,
        default: 'excel1' // 默认值
    }
})

onMounted(()=>{
    const key = '折线图'
    chartMenuSelect(key)
})

let currentPage = ref('echarts')

const changePage = () => {
    if (currentPage.value === 'word') {
        currentPage.value = 'echarts'
        console.log('切换到Echarts')
        setTimeout(()=>chartMenuSelect('折线图'), 100)
    } else {
        currentPage.value = 'word'
    }
}

/**
 * 图表菜单
 */
 const chartMenu = [
    { label: '折线图', key: '折线图' },
    { label: '柱状图', key: '柱状图' },
    { label: '饼图', key: '饼图' },
    { label: '散点图', key: '散点图' },
    // { label: '雷达图', key: '雷达图' },
    // { label: '热力图', key: '热力图' },
    // { label: '仪表图', key: '仪表图' },
    // { label: '箱线图', key: '箱线图' },
    // { label: '地图', key: '地图' },
    // { label: '自定义图表', key: '自定义图表' }
]
const chartMenuSelect = (key: string) => {
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const chart = echarts.init(document.getElementById('echarts'))

    let dataX = [];
    for (let i = 0; i <= 10; i++) {
        dataX.push(alphabet.charAt(i));
    }

    const series = [];

    for (let row = 0; row < (key === '饼图' ? 1 : 5); row++) {
        const seriesItem: {
            color?: string,
            data: any[],
            type?: string; // 可选属性  
            stack: string;
            smooth?: boolean;
        } = {
            stack: 'x',
            data: []
        };

        for (let col = 0; col <= 10; col++) {
            const cellValue = Math.floor(Math.random() * 10) + 1;
            seriesItem.data.push({
                value: cellValue,
                name: '数据' + alphabet.charAt(col)
            });
        }

        series.push(seriesItem);
    }

    switch (key) {
        case '柱状图':
            series.forEach(s => s.type = 'bar')
            break;
        case '折线图':
            series.forEach(s => s.type = 'line')
            series.forEach(s => s.smooth = true)
            break;
        case '散点图':
            series.forEach(s => s.type = 'scatter')
            break;
        case '饼图':
            dataX = []
            series.forEach(s => s.type = 'pie')
            series.forEach(s => s.color = undefined)
            break;
        default:
            break;
    }
    // 初始化chart
    chart.clear()
    // 使用新的方式设置chart
    const echartsOption = {
        title: {
            text: key
        },
        xAxis: {
            data: dataX
        },
        yAxis: {},
        series
    }
    chart.setOption(echartsOption)

}

/**
 * 头部标题图标设置
 * 头标下拉菜单设置
 */
const excelSelect = (key: string) => {
    console.log(key)
}
let excelIcon = () => {
    return h(NFlex, () => [h(NDropdown, { trigger: "hover", size: "huge", showArrow: true, onSelect: excelSelect }, () => h(NButton, { text: true, style: 'font-size: 24px' }, () => h(SvgIcon, { iconClass: props.icon }))), h('div', props.title)])
}
const header_excel = () => excelIcon()

/**
 * end
 */

/**
 * 关闭页面，返回路由上一页
 */

const handleClose = () => {
    console.log('关闭页面')
    router.go(-1)
}
/**
 * end
 */

</script>
<style>
.beRed {
    color: red;
}

.beBold {
    font-weight: bold;
}

.beItalic {
    font-style: italic;
}
/* 下划线 */
.beUnderline {
  text-decoration: underline;
}

.beLineThrough {
  text-decoration: line-through;
}
.beAllLine {
    text-decoration: underline line-through; 
}
.beBackgroundYellow {
    background-color: yellow !important;
}

.beFontSize-8 {
    font-size: 8px;
}

.beFontSize-9 {
    font-size: 9px;
}

.beFontSize-10 {
    font-size: 10px;
}

.beFontSize-11 {
    font-size: 11px;
}

.beFontSize-12 {
    font-size: 12px;
}

.beFontSize-13 {
    font-size: 13px;
}

.beFontSize-14 {
    font-size: 14px;
}

.beFontSize-15 {
    font-size: 15px;
}

.beFontSize-16 {
    font-size: 16px;
}

.beFontSize-17 {
    font-size: 17px;
}

.beFontSize-18 {
    font-size: 18px;
}

.beFontSize-19 {
    font-size: 19px;
}

.beFontSize-20 {
    font-size: 20px;
}

.beFontSize-21 {
    font-size: 21px;
}

.beFontSize-22 {
    font-size: 22px;
}

.btntools {
    font-size: 24px;
    margin-left: 5px;
    margin-right: 10px;
}
</style>